/**
 * Controls all images
 */
var images = {
	
	/**
	 * Images
	 */
	items: [],
	
	/**
	 * Drawings
	 */
	drawings: [],

	/**
	* Do a ajax request to get the images from google and putting it in the array 'items'.
	* @param String Woordenschat.word	The word that has been searched on.
	* @param Object	imageList			The results returned in Json format.
	*/
	getImages: function(){
		ajax("https://ajax.googleapis.com/ajax/services/search/images?v=1.0&imgsz=medium&safe=active&rsz=5&q=" + Woordenschat.word, function(imageList){
			var found = 0;
			if(imageList.responseData.results != undefined) {
				for(var i = 0; i < imageList.responseData.results.length; i++) {
					if(found < 5){
						var img = (imageList.responseData.results[i].url);
						images.items.push(img);
						found++;
					}
				}
			}
			images.output();
		});
	},
	
	/**
	* Do a ajax request to get the drawings from the database and putting it in the array 'drawings'.
	*/
	getDrawings: function(){
		ajax(Woordenschat.url+'php/index.php?task=getDrawings&word=' + Woordenschat.word, function(drawingList) {
			var found = 0;
			for(var i = 0; i < drawingList.result.length; i++) {
				if(found < 5){
					var drawing = (drawingList.result[i].id);
					images.drawings.push(drawing);
					found++;
				}
			}
			images.getImages();
		});
	},
	
	/**
	 * Displaying the images, display error if there aren't images available.
	 * @param Object Panel		The panel div
	 * @param Object imgMainDiv	The div which contains the images from google.
	 */
	processImages: function(panel, imgMainDiv) {
		images.generalInfo(panel, 'Plaatjes', 'piraat-imageTitle');
		if (images.items.length == 0 || Woordenschat.word == '') {
			var error = document.createTextNode('Er zijn geen plaatjes gevonden.');
			imgMainDiv.appendChild(error);
			return;
		}
		for(var i = 0; i<images.items.length; i++){
			var imgDiv = content.document.createElement("div");
			imgDiv.className = 'images';
			var img = content.document.createElement("img");
			img.src = images.items[i];
			img.width = 100;
			img.height = 100;
			imgDiv.appendChild(img);
			imgMainDiv.appendChild(imgDiv);
			}
		images.generalInfo(panel, 'Powered by Google', 'piraat-googleBrand');	
	},
	
	/**
	 * Same as processImages except, the drawings are being displayed.
	 * @param Object Panel			The panel div
	 * @param Object drawingMainDiv	The div which contains the drawings.
	 */
	processDrawings: function(panel, drawingMainDiv) {
		images.generalInfo(panel, 'Tekeningen (klik erop om te stemmen!)', 'piraat-childDrawingsTitle');
		if(images.drawings.length == 0 || Woordenschat.word == ''){
			var error = document.createTextNode('Er zijn geen tekeningen gevonden.');
			drawingMainDiv.appendChild(error);	
			return;
		}
		for(var i = 0; i<images.drawings.length; i++){
			var imgDiv = content.document.createElement("div");
			imgDiv.className = 'images';
			imgDiv.id = 'divDrawingId'+ images.drawings[i];
			var img = content.document.createElement("img");
			img.src = Woordenschat.url+'drawings/' + images.drawings[i] + '.png';
			img.title = images.drawings[i];
			img.width = 100;
			img.height = 100;
			img.onclick = function(){ images.raiseScore(this.title) }
			imgDiv.appendChild(img);
			drawingMainDiv.appendChild(imgDiv);
		}
	},
	
	/**
	 * Raise the score of the image that has been clicked on by the User.
	 * @param String drawingId	The ID of the drawing that has been searched on (the id is the same as the id given by the database).	
	 */
	raiseScore: function(drawingId) {
		imgDiv = content.document.getElementById('divDrawingId' + drawingId);
		imgDiv.className = 'imageVoted';
		ajax(Woordenschat.url+'php/index.php?task=raiseScore&imgid=' + drawingId, function() {
		});
	},
	
	/**
	 * Displaying general text/information on the panel.
	 * @param Object Panel	The panel div
	 * @param String	Title	The text that needs to be displayed.
	 * @param String divId	The id of the div.
	 */
	generalInfo: function(panel, title, divId) {
		var div = content.document.createElement('div');
		div.id = divId;
		div.appendChild(document.createTextNode(title));
		panel.appendChild(div);
	},
	
	/**
	 * Calling the functions to output/display the images and drawings.
	 */
	output: function(){
		var panel = content.document.getElementById('piraat-panel');
		var imgMainDiv = content.document.createElement("div");
		imgMainDiv.id = "piraat-imgMainDiv";
		var drawingMainDiv = content.document.createElement("div");
		drawingMainDiv.id = "piraat-drawingMainDiv";
		images.processImages(panel, imgMainDiv);
		images.processDrawings(panel, drawingMainDiv);
		panel.appendChild(drawingMainDiv);
		panel.appendChild(imgMainDiv);
		images.items.length = 0;
		images.drawings.length = 0;
	}
}